<template>
  <view class="container">
    <view class="tab-block" v-if="tabs">
      <view class="tab-block_cont">
        <ve-tabs v-if="tabs" :actived="0" :list="tabs" @change="tabsChange"></ve-tabs>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list-body" v-if="modeStatus == 'preview'">
      <PreBillPanItem v-for="record in dataSource" :record="record" :key="record.id" />
    </view>
    <view class="list-body" v-else>
      <BillPanItem v-for="record in dataSource" :record="record" :key="record.id" />
    </view>

    <!-- 加载结束列表为空时展示 -->
    <ve-empty v-if="dataSource.length == 0 && loadFinish"></ve-empty>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import BillPanItem from './components/bill-item.vue'
  import PreBillPanItem from './components/pre-bill-item.vue'
  import { billPlanListAPI, billPlanListPreviewAPI } from '@/api/order/lOrder'

  const tabs = ref()
  const dataSource = ref([])
  let groupData = []
  const loadFinish = ref(false)
  const loadData = (query) => {
    billPlanListAPI(query).then((res) => {
      loadFinish.value = true
      if (res.code == 200) {
        groupData = res.result
        tabs.value = groupData.map((item) => item.name)
        if (groupData && groupData.length) {
          dataSource.value = groupData[0].list
        }
      }
    })
  }
  // 预览接口
  const loadDataPreview = (query) => {
    billPlanListPreviewAPI(query).then((res) => {
      loadFinish.value = true
      if (res.code == 200) {
        dataSource.value = res.result
      }
    })
  }
  // 标签页change
  const tabsChange = (index) => {
    dataSource.value = groupData[index].list
  }

  // mode = view\preview
  const modeStatus = ref('')
  onLoad(({ id, mode = 'preview', query }) => {
    modeStatus.value = mode
    // mode.value = mode
    let params
    if (mode == 'preview') {
      params = JSON.parse(query || '{}')
      loadDataPreview(params)
    } else {
      params = { orderId: id }
      loadData(params)
    }
  })
</script>

<style lang="less" scoped>
  .container {
    position: relative;

    .tab-block {
      flex-shrink: 0;
      height: 90rpx;

      &_cont {
        position: fixed;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 9;
      }
    }

    .list-body {
      padding: 24rpx;
    }
  }
</style>
